<template>
  <div class="screen">
    <dv-full-screen-container
      style="width: 100%; height: 100%; background-color: #282c34"
    >
      <ScreenHead
        :showModel="showModel"
        @changeShowModel="changeShowModel"
      ></ScreenHead>

      <dv-border-box-1 class="dv1">
        <Modele1 v-show="showModel == 1"></Modele1>
        <Module2 v-show="showModel == 2"></Module2>
      </dv-border-box-1>
    </dv-full-screen-container>
  </div>
</template>

<script>
import ScreenHead from './ScreenHead.vue'
import Modele1 from './Module1'
import Module2 from './Module2'
export default {
  components: { ScreenHead, Modele1, Module2 },
  data () {
    return {
      showModel: 1
    }
  },
  // 加载时开启监听
  mounted () {
    window.addEventListener('resize', this.handleResize)
  },
  beforeDestroy () {
    window.removeEventListener('resize', this.handleResize)
  },
  methods: {
    handleResize () {
      location.reload() // 刷新页面
    },
    changeShowModel (num) {
      this.showModel = num
      console.log('触发', num)
    }
  }
}
</script>

<style lang="scss" >
$primary-color: #409eec;
$bgc-color: #282c34;
// !去掉scoped就可以生效了
.dv-border-box-1 .border-box-content {
  padding: 2vh;
}
.screen {
  font-size: 2vh;
  color: white;
  background-color: $bgc-color;

  .dv1 {
    width: 100%;
    height: 90vh;
    background-color: $bgc-color;
  }
}
</style>
